<template>
  <su-popup
    v-model:show="state.show_popup"
    position="bottom"
    :round="15"
    :overlay="true"
    @close="handlePopupChange"
  >
    <view class="popup-header">
      <text
        class="cancel"
        @tap="handlePopupChange"
      >关闭</text>
      <text
        class="confirm"
        @tap="handleStageConfirm"
      >选择</text>
    </view>
    <view class="ui-documents-prpus">
      <picker-view
        class="picker-view"
        :value="stageVal"
        @change="handleStageChange"
      >
        <picker-view-column>
          <view
            class="item prize-item-name"
            v-for="item in props.list"
            :key="item.title"
          >{{ item.title }}</view>
        </picker-view-column>
      </picker-view>
    </view>

  </su-popup>
</template>

<script setup>
import { ref, reactive, computed, watch, nextTick } from 'vue';
const emit = defineEmits(['selectValue']);
const props = defineProps({
  // 是否显示
  // show: {
  //   type: Boolean,
  //   default: false
  // },
  // 选中值
  // value: {
  //   type: [String, Number],
  //   default: ''
  // },
  list: {
    type: Array,
    default: () => []
  },
  // 显示标题
  title: {
    type: String,
    default: '选择证件类型'
  },
  // 是否显示取消按钮
  showCancel: {
    type: Boolean,
    default: true
  },
  // 是否显示确定按钮
  showConfirm: {
    type: Boolean,
    default: true
  }
})
// 1：身份证；(默认)
// 2：港澳台通行证；
// 3：台湾身份证；
// 4：香港身份证；
// 5：澳门身份证；
// 6：护照；
// 7：居住证；
// 9：其它法定文件
let stageVal = reactive([0])
const state = reactive({
  show_popup: false,
  selectData: {
    title: '',
    titleVal: '',
  }

  // params: {
  //   begin_date: '',
  //   end_date: '',
  //   area: '杭州市',
  //   sort: '',
  //   longitude: '',
  //   latitude: ''
  // }
})
const handleStageChange = (e) => {
  state.selectData.title = props.list[e.detail.value[0]].title
  state.selectData.titleVal = props.list[e.detail.value[0]].value
}
const handleStageConfirm = () => {
  emit('selectValue', state.selectData)
}
const handlePopupChange = () => {
  state.show_popup = false
}
const open = () => {
  state.show_popup = true;
  // 数据初始化
  setTimeout(() => {
    state.selectData.title = props.list[0].title
    state.selectData.titleVal = props.list[0].value
  }, 100)
}

defineExpose({
  open,
});
</script>

<style lang="scss" scoped>
.prize-item-name {
  display: flex;
  justify-content: center;
  align-items: center;
  // padding: 5rpx 0;
}
.popup-header {
  padding: 20rpx 40rpx 10rpx 40rpx;
  display: flex;
  justify-content: space-between;
}
.picker-view {
  height: 100%;
  box-sizing: border-box;
}
.ui-documents-prpus {
  height: 400rpx;
}
</style>